<template>
    <BreadCrumb ref="breadcrumb" :item="item"> </BreadCrumb>
    <div class="table-wrapper">
        <!-- 顶部 -->
        <div class="table-top">
            <!-- 表格顶部 -->
            <div class="table-header">
                <!-- 搜索框 -->
                <div class="search-wrapper">
                    <el-input v-model="adminAccount" style="width: 240px" placeholder="输入账号进行搜索" :prefix-icon="Search"
                        @change="searAdmin" />
                </div>
                <div class="button-wrapper">
                    <el-button type="primary" @click="openCreate(2)">添加用户管理员</el-button>
                </div>
            </div>
            <!-- 表格内容 -->
            <div class="table-content">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="account" label="账号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="sex" label="性别"></el-table-column>
                    <el-table-column prop="department" label="部门"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column prop="update_time" label="更新时间">
                        <template #default="{ row }">
                            {{ row.update_time }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <div style="display: flex;width: 100%;flex-wrap: wrap;align-items: center;gap:12px">
                                <div><el-button type="success" @click="openEdit(row.id)">编辑</el-button></div>
                                <div><el-button type="danger" @click="openDelete(row.id)">删除</el-button></div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 底部 -->
        <div class="table-footer">
            <el-pagination :page-size="1" layout="prev, pager, next" :total="adminTotal"
                :page-count="paginationData.pageCount" :current-page="paginationData.currentPage"
                @current-change="currentChange"></el-pagination>
        </div>
    </div>
    <Create ref="create"></Create>
    <Edit ref="edit"></Edit>
    <Delete ref="del"></Delete>
</template>

<script lang="ts" setup>
    import BreadCrumb from '@/components/BreadCrumb.vue';
    import { Search } from '@element-plus/icons-vue'
    import Create from '../components/create_admin.vue'
    import Edit from '../components/edit_admin.vue'
    import Delete from '../components/delete_admin.vue'
    import { searchUser, getAdminListLength, returnListData } from '@/api/userinfo.js';
    import { bus } from '@/utils/mitt'
    import { ref, reactive, onBeforeUnmount, onMounted } from 'vue';
    import { ElMessage } from 'element-plus'

    onMounted(() => {
        bus.on('adminDialogOff', async (id: number) => {
            // 创建管理员
            if (id === 1) {
                await getAdminListlength()
                const res: any = await returnListData(paginationData.currentPage, '用户管理员')
                tableData.value = res?.result || []
            }

            // 编辑管理员
            if (id === 2) {
                const res: any = await returnListData(paginationData.currentPage, '用户管理员')
                tableData.value = res?.result || []
            }

            // 对管理员降级
            if (id === 3) {
                try {
                    const res: any = await returnListData(paginationData.currentPage, '用户管理员')
                    tableData.value = res?.result || []

                    if (tableData.value.length === 0 && paginationData.currentPage > 1) {
                        paginationData.currentPage -= 1
                        const firstPageRes: any = await returnListData(paginationData.currentPage, '用户管理员')
                        tableData.value = firstPageRes?.result || []
                    }
                    await getAdminListlength()
                } catch (error) {
                    console.error('刷新产品管理员列表失败:', error)
                    ElMessage.error('刷新失败，请重试')
                }
            }
        })
    })
    //分页数据
    const paginationData = reactive({
        //总页数
        pageCount: 1,
        //当前页数
        currentPage: 1
    })

    /**
     * 获取第一页产品管理员数据
     * 核心处理步骤:
     * 1. 调用接口获取第一页（page=0）的数据
     * 2. 将返回结果更新到表格数据中
     * 输入输出说明:
     * - 输入: 固定参数 page=0 和身份标识 '用户管理员'
     * - 输出: 更新 tableData.value 显示第一页数据
     * 异常处理逻辑:
     * - 如果请求失败或无数据，tableData.value 会被设置为空数组
     */
    const getFirstPageList = async () => {
        const res: any = await returnListData(1, '用户管理员')
        console.log(res.result)
        tableData.value = res?.result || []
    }

    const adminTotal = ref<number>(0)

    /**
     * 获取产品管理员总数并计算总页数
     * 核心处理步骤:
     * 1. 调用接口获取管理员总数
     * 2. 计算总页数并更新分页组件
     * 输入输出说明:
     * - 输入: 身份标识 '用户管理员'
     * - 输出: 更新 adminTotal.value 和 paginationData.pageCount
     * 异常处理逻辑:
     * - 如果请求失败，adminTotal.value 和 pageCount 保持默认值 1
     */
    const getAdminListlength = async () => {
        const res: any = await getAdminListLength('用户管理员')
        adminTotal.value = res.length
        paginationData.pageCount = Math.ceil(res.length / 10)
    }
    getAdminListlength()
    getFirstPageList()

    /**
     * 分页组件页码切换事件处理
     * 核心处理步骤:
     * 1. 更新当前页码
     * 2. 获取新页码对应的数据
     * 3. 刷新总条数和分页总数
     * 输入输出说明:
     * - 输入: value (number) 新的页码
     * - 输出: 更新 tableData 显示对应页面数据
     * 异常处理逻辑:
     * - 如果请求失败，清空表格数据并提示用户
     */
    const currentChange = async (value: number) => {
        try {
            paginationData.currentPage = value
            const res = await returnListData(value, '用户管理员')
            console.log(res.result)
            tableData.value = res?.result || []

            await getAdminListlength()
        } catch (error) {
            console.error('分页查询失败:', error)
            tableData.value = []
        }
    }

    const adminAccount = ref<string>()
    /**
         * 搜索管理员用户
         * 核心处理步骤:
         * 1. 获取输入框中的账号值
         * 2. 调用搜索接口获取匹配结果
         * 3. 更新表格数据展示搜索结果
         * 输入输出说明:
         * - 输入: adminAccount (string) 管理员账号
         * - 输出: 更新 tableData 展示搜索结果
         * 异常处理逻辑:
         * - 如果搜索失败或无结果，tableData 将被设置为空数组
         */
    const searAdmin = async () => {
        const res: any = await searchUser(adminAccount.value as string);
        tableData.value = res.result
    };

    const del = ref();

    /**
     * 打开删除对话框并传递待删除ID
     * 核心处理步骤:
     * 1. 触发删除组件的 open 方法显示对话框
     * 2. 通过事件总线传递待删除记录的ID
     * 输入输出说明:
     * - 输入: id (any) 待删除记录的唯一标识
     * - 输出: 无返回值，但会触发删除组件显示和ID传递
     */
    const openDelete = (id: any) => {
        del.value.open();
        bus.emit('deleteId', id)
    };

    const edit = ref();

    /**
     * 打开编辑对话框并传递待编辑ID
     * 核心处理步骤:
     * 1. 触发编辑组件的 open 方法显示对话框
     * 2. 通过事件总线传递待编辑记录的ID
     * 输入输出说明:
     * - 输入: id (any) 待编辑记录的唯一标识
     * - 输出: 无返回值，但会触发编辑组件显示和ID传递
     */
    const openEdit = (id: any) => {
        edit.value.open();
        bus.emit('editId', id)
    }

    const create = ref();

    /**
     * 打开创建对话框并指定管理员类型
     * 核心处理步骤:
     * 1. 判断 create 组件是否定义且具有 open 方法
     * 2. 若满足条件则调用 open 方法并传入 index
     * 输入输出说明:
     * - 输入: index (number) 管理员类型标识
     * - 输出: 显示创建弹窗并设置对应的标题
     * 异常处理逻辑:
     * - 如果组件未正确定义或未暴露 open 方法，会提示用户并防止程序崩溃
     */
    const openCreate = (index: number) => {
        if (create.value && typeof create.value.open === 'function') {
            create.value.open(index)
        } else {
            console.error('创建组件未定义或未正确暴露 open 方法')
            alert('创建失败：管理员组件未正确加载，请刷新重试。')
        }
    }

    /**
     * 刷新管理员列表
     * 核心处理步骤:
     * 1. 重新获取管理员数量
     * 2. 重新加载第一页数据
     * 输入输出说明:
     * - 输入: 无
     * - 输出: 更新分页器和表格数据展示最新管理员列表
     * 异常处理逻辑:
     * - 如果任一接口失败，只更新可用部分数据
     */
    const getAdminlist = async () => {
        await getFirstPageList()
    }

    // 面包屑
    const breadcrumb = ref();
    // 面包屑参数
    const item = ref(
        {
            first: '用户管理',
            second: '用户管理员'
        }
    )

    /**
     * 表格数据容器
     * 初始化为空数组以避免 undefined 错误
     */
    const tableData = ref<any[]>([])
    onBeforeUnmount(() => {
        bus.all.clear()
    })
</script>

<style scoped lang="scss"></style>